<template>
    <div class="relationship">
        <a-tabs v-model:activeKey="activeKey" :animated="false">
            <a-tab-pane key="0" tab="关系总览">
                <div class="content" ref="allChart"></div>
            </a-tab-pane>
            <a-tab-pane key="4" tab="关系树">
                <div class="content" style="overflow:auto;">
                    <a-tree
                        class="draggable-tree"
                        block-node
                        :tree-data="gData"
                        :showLine="true"
                        :autoExpandParent="true"
                        :replaceFields="{children:'children', title:'name', key:'id' }"
                    >
                        <template #title="treeNode"><span>{{treeNode.name}}</span><a-button type="link" size="small" @click="showUserInfo(treeNode)">查看详情</a-button></template>
                    </a-tree>
                </div>
            </a-tab-pane>

			<a-tab-pane key="1" tab="查先人">
                <div class="content">
                    <a-input-group compact>
                    <a-select
                        v-model:value="name"
                        show-search
                        placeholder="请输入名字"
                        style="width: 200px"
                        :show-arrow="false"                        
                        :filterOption="(inputValue,option)=>filterOption(inputValue,option)"
                        @search="handleSearch"
                        @change="handleChange"
                    >
                        <a-select-option v-for="item in data" :value="item.id" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-select-option>
                    </a-select>
                    <a-button type="primary" @click="getFathers">查询</a-button>
                    </a-input-group>
                    <div class="chart">
                        <a-timeline>
                            <a-timeline-item :color="item.id===name?'green':'#00CCFF'" :class="item.id===name?'green':'grey'" v-for="item in fatherList" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-timeline-item>
                        </a-timeline>
                    </div>
                </div>
            </a-tab-pane>

            <a-tab-pane key="2" tab="查后代">
                <div class="content">
                    <a-input-group compact>
                    <a-select
                        v-model:value="name2"
                        show-search
                        placeholder="请输入名字"
                        style="width: 200px"
                        :show-arrow="false"                        
                        :filterOption="(inputValue,option)=>filterOption(inputValue,option)"
                        @search="handleSearch"
                        @change="handleChange"
                    >
                        <a-select-option v-for="item in data" :value="item.id" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-select-option>
                    </a-select>
                    <a-button type="primary" @click="getChildren">查询</a-button>
                    </a-input-group>                    
                    <div class="chart" ref="childrenChart"></div>
                </div>
            </a-tab-pane>

            <a-tab-pane key="3" tab="查关系">
                <div class="content">
                    <a-input-group compact>
                    <a-select
                        v-model:value="name3"
                        show-search
                        placeholder="请输入人物1"
                        style="width: 200px"
                        :show-arrow="false"                        
                        :filterOption="(inputValue,option)=>filterOption(inputValue,option)"
                        @search="handleSearch"
                        @change="handleChange"
                    >
                        <a-select-option v-for="item in data" :value="item.id" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-select-option>
                    </a-select>
                    <a-select
                        v-model:value="name4"
                        show-search
                        placeholder="请输入人物2"
                        style="width: 200px"
                        :default-active-first-option="false"
                        :show-arrow="false"                        
                        :filterOption="(inputValue,option)=>filterOption(inputValue,option)"
                        @search="handleSearch"
                        @change="handleChange"
                    >
                        <a-select-option v-for="item in data" :value="item.id" :key="item.id">第{{item.gid}}世“{{item.gName}}”字辈{{familyName}}{{item.name}}</a-select-option>
                    </a-select>
                    <a-button type="primary" @click="getRelationship">查询</a-button>
                    </a-input-group>                    
                    <div class="chart" ref="relationshipChart"></div>
                </div>
            </a-tab-pane>
        </a-tabs>

        <a-drawer
        title="基本信息"
        placement="right"
        :width="400"
        :closable="false"
        :visible="userInfoVisible"
        @close="userInfoVisible=false"
        >
        <p>名称：{{userInfo.name}}</p>
        <p v-if="userInfo.character">字：{{userInfo.character}}</p>
        <p v-if="userInfo.nickname">号：{{userInfo.nickname}}</p>
        <p>辈份：第{{userInfo.gid}}世“{{userInfo.gName}}”字辈</p>
        <p>性别：<span v-if="userInfo.sex===1">男</span><span v-else>女</span></p>
        <p v-if="userInfo.merry===1"><span v-if="userInfo.sex===1">妻</span><span v-else>夫</span>：{{userInfo.spouse}}</p>
        <p>生于：{{userInfo.birthday}}</p>
        <p v-if="userInfo.deadline&&userInfo.deadline!=='null'">卒于：{{userInfo.deadline}}</p>
        <p v-if="userInfo.children&&userInfo.children.length>0">子女：
            <a-tag v-for="item in userInfo.children" :key="item.id">{{item.name}}</a-tag>
        </p>
        <p v-if="userInfo.memo">备注：{{userInfo.memo}}</p>
        </a-drawer>
    </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import * as Echart from 'echarts';
import option from '@/until/chartOption';
import Http from '@/until/http';
import { debounce } from 'lodash-es';
import config from '@/until/configs';

export default defineComponent({
    setup() {
        let allChart = ref(null);
        let childrenChart = ref(null);
        let relationshipChart = ref(null);
        var childrenChartDom,relationshipChartDom;

        const state = reactive({
            activeKey:'0',
            name:null,
            name2:null,
            name3:null,
            name4:null,
            data:[],
            familyName:config.familyName,
            fatherList:[],
            gData:[],
            userInfoVisible:false,
            userInfo:{}
        })

        const fetch= debounce((value)=> {
            Http.searchParent({name:value})
            .then(d => {
                value = '';
                Object.assign(state,{data:d.list});
            });
        },500);

        const handleSearch=(val)=>{
            fetch(val);
        }

        const handleChange=(val)=>{
            fetch(val);
        }

        const filterOption = (inputvalue,option) => {
            let name = option.children[0].children;
            if(name.indexOf(inputvalue)===-1) {
                return false;
            } else {
                return true;
            }
        }

        const getFathers = ()=>{
            if(!state.name) {
                return false;
            }
            Http.getFathers({id:state.name}).then(res=>{
                if(res) {
                    Object.assign(state,{
                        fatherList:res
                    })
                }
            });
        }

        const getChildren = ()=>{
            if(!state.name2) {
                return false;
            }
            Http.getChildren({id:state.name2}).then(res=>{
                childrenChartDom = Echart.init(childrenChart.value);
                let childrenOption = {...option};
                childrenOption.series[0].data = [res];
                if(childrenChartDom) {
                    childrenChartDom.setOption(childrenOption);
                }
            })
        }

        const getRelationship = ()=>{
            if(!state.name3||!state.name4) {
                return false;
            }
            Http.getRelationship({id:state.name3,id2:state.name4}).then(res=>{
                relationshipChartDom = Echart.init(relationshipChart.value);
                let relationshipOption = {...option};
                let data = setSpecialMember([res]);
                relationshipOption.series[0].data = data;
                if(relationshipChartDom) {
                    relationshipChartDom.setOption(relationshipOption);
                }
            })
        }

        const setSpecialMember = (arr)=>{
            arr.forEach(item=>{
                if(item.id==state.name3||item.id==state.name4) {
                    item.itemStyle = {
                        color:'#f00',    
                        borderColor:'#00f'
                    }
                }                
                if(item.children) {
                    setSpecialMember(item.children)
                }
            })
            return arr;
        }

        const showUserInfo = (node)=>{
            Object.assign(state,{
                userInfoVisible:true,
                userInfo:node
            });
        }




        onMounted(()=>{
            let myChart = Echart.init(allChart.value);
            Http.getAllMember().then(res=>{                
                option.series[0].data = res;
                Object.assign(state,{
                    gData:res
                })
                if(myChart) {
                    myChart.setOption(option);
                }
            });

            myChart.on('click',(params,e)=>{
                console.log(params,e);
            })

        });

        return {
            allChart,
            childrenChart,
            relationshipChart,
            ...toRefs(state),
            handleSearch,
            handleChange,
            filterOption,
            getFathers,
            getChildren,
            getRelationship,
            showUserInfo
        }
    }
})
</script>

<style lang="scss">
@import '@/scss/relationship.scss';
</style>